<template>
  <div >
      <el-container>
        <el-header class="home-header">
                <el-menu
                :default-active="this.$route.path"
                mode="horizontal"
                @select="handleSelect"
                background-color="#2f3542"
                text-color="#ffffff80"
                router
                active-text-color="#fff">
                <el-menu-item index="/findmusic">发现音乐</el-menu-item>
                <el-menu-item index="/ranking">排行榜</el-menu-item>
                <el-menu-item index="/songsheet">歌单</el-menu-item>
                <el-menu-item index="/video">视频</el-menu-item>
                <el-menu-item index="/singer">歌手</el-menu-item>
                <el-menu-item index="/mymusic">我的音乐</el-menu-item>
                <el-menu-item  index="/search">
                    <i class="el-icon-search"></i>
                    <a class="searchtext">搜索</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-main class="home-main">
            <router-view v-if='isRouterAlive'></router-view>
        </el-main >
    </el-container>
  </div>
</template>

<script>

export default {
  data () {
    return {
      isRouterAlive: true,
      activeIndex: 'findmusic'
    }
  },
  created () {

  },
  methods: {
    handleSelect () {

    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  }
}
</script>

<style  scoped>
    .home-main{
        /* 设置固定宽度，水平居中 */
        padding: 0;
        width: 100%;
        margin: 0 auto;
        /* 因为header现在是固定在顶部，所以main 距离顶部需要设置50px */
        margin-top: 50px;
    }
    .home-header{
        /* 高度，import表示增加权重 */
        height: 50px !important;
        /* 阴影 水平-垂直阴影长度-模糊长度-阴影颜色 */
        box-shadow: 0 5px 5px rgb(47 53 66 / 60%);
        /* 背景色 */
        background: #2f3542;
        /* 实现元素水平居中 */
        display: flex;
        justify-content: center;
        /* 导航栏固定在顶部 */
        position: fixed;
        top: 0;
        width: 100%;
        /* 导航栏z位置最高 防止底部元素滑动时被遮挡 */
        z-index: 300;
    }
    .el-menu-item{
        padding: 0 20px;
        /* 高度与header高度保持一致 */
        height: 50px !important;
        line-height: 50px !important;

    }
    /* 监听屏幕的宽度，当宽度小于500px时，元素左右边距变为10px */
    @media screen and (max-width:600px){
        .el-menu-item{
            padding: 0 5px;
            }
        .searchtext {
                display: none;
            }
        }
</style>>
